<template>
  <div class="footer">
            <div class="logo" v-for="(item,index) in logo" :key="index">
                <span :class="{foot:foots==index}" @click="footClick(index)">{{item.text}}</span>
            </div>
        </div>
</template>

<script>
export default {
data(){
    return{
        foots: 0,
        logo: [
            { img: 'p1', text: '首页' },
            { img: 'p2', text: '订单' },
            { img: 'p3', text: '我的' }
        ]
    }
},
methods:{
    footClick(index) {
            this.foots = index
        }
}
}
</script>

<style lang="scss" scoped>
.footer {
    width: 100%;
    height: 50px;
    border-top: 1px solid #e1e1e1;
    position: fixed;
    bottom: 0;
    display: flex;
    background: #fff;
}

.logo {
    width: 33.33%;
    text-align: center;
    line-height: 50px;
}

.foot {
    color: rgb(27, 95, 198);
    font-weight: bold;
}
</style>